<template>
  <div class="box">
    <p class="title">产品详情</p>
    <el-table :data="list" border style="width:100%; border-top:1px solid #ebeef5">
      <el-table-column prop="key" label="标题" width="180"></el-table-column>
      <el-table-column prop="value" label="内容">
        <template slot-scope="props">
          <div class="img-box" v-if="props.row.key === '首图图片'" :style="'background-image:url(' + props.row.value + ')'"></div>
          <div class="all-flex-center-start" v-else-if="props.row.key === '产品媒体'">
            <div class="video-box" v-for="item in props.row.value" v-if="item.type === 'video'">
              <video src="item.src" controls="controls"></video>
            </div>
            <div class="img-box" :style="'background-image:url(' + item.src + ')'" v-for="item in props.row.value" v-if="item.type === 'image'">
            </div>
          </div>
          <div id="editor" v-else-if="props.row.key === '详情介绍'"></div>
          <span v-else>{{props.row.value}}</span>
        </template>
      </el-table-column>
    </el-table>
    <p style="margin-top:30px; text-align:center">
      <router-link to="/product/list"><el-button>返回</el-button></router-link>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      detailKey: {
        productID: "产品id",
        masterID: "供应商id",
        parentID: "父级分类id",
        classID: "分类id",
        productName: "产品名称",
        costPrice: "成本价",
        agentPrice: "代理价",
        salePrice: "销售价",
        commission: "佣金（返佣价）",
        marketPrice: "市场价",
        sort: "排序",
        stock: "库存",
        titleImg: "首图图片",
        media: "产品媒体",
        validity: "有效期",
        useRules: "使用规则",
        promType: "销售方式",
        salesSum: "商品销量",
        status: "状态",
        commentCount: "商品评论数",
        classID: "分类id",
        trueName: "供应商名称",
        className: "分类名称",
        content: "详情介绍"
      }
    }
  },
  created() {
    //获取详情操作
    const id = this.$route.query.id;
    const _this = this;
    this.$ajax({
      url: "product/getinfo",
      data: {
        app: {
          productID: id
        }
      },
      perfect(con) {
        for (let key in con) {
          if (con[key].constructor === Object && con[key]) {
            for (let name in con[key]) {
              let obj = {};
              obj.key = _this.detailKey[name];
              obj.value = con[key][name];
              _this.list.push(obj);
            }
            continue;
          } 
          let obj = {};
          obj.key = _this.detailKey[key];
          obj.value = con[key];
          _this.list.push(obj);
          if (key === "content") {
            let E = require('wangeditor');
            //加载富文本编辑器
            _this.$nextTick(() => {
              let editor = new E("#editor");
              editor.customConfig.menus = [];
              editor.create();
              editor = editor;
              editor.txt.html(con[key]);
            });
          }
        }
      }
    });
  }
};
</script>

<style scoped>
.title {
  padding: 20px 0;
  font-size: 20px;
  text-align: center;
}
.img-box {
  width: 100px;
  height: 100px;
  background-position: center;
  background-size: cover;
  margin-right: 10px
}
.video-box {
  display: flex;
  align-items: center;
  width: 150px;
  height: 100px;
  overflow: hidden;
  margin-right: 10px
}
.video-box video {
  width: 100%;
  background: black
}
</style>
